<!-- Licensed under a BSD license. See license.html for license -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Three.js - Load .GLTF</title>
    <style>
    html, body {
        margin: 0;
        height: 100%;
    }
    #c{
        width: 100%;
        height: 100%;
        display: block;
    }
    </style>
  </head>
  <body>
    <canvas id="c"></canvas>
  </body>
<script type="module">
    import * as THREE from './js/three.module.js';
    import {OrbitControls} from './js/OrbitControls.js';
    import {GLTFLoader} from './js/GLTFLoader.js';
    // import * as dat from './js/dat.gui.min.js';

    const canvas = document.querySelector('#c');
     /**
     * 创建场景对象Scene
     */
    var mixer,actions = [];
    var scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
    // var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    // var material = new THREE.MeshLambertMaterial({
    //   color: 0x0000ff
    // }); //材质对象Material
    // var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    // scene.add(mesh); //网格模型添加到场景中
    /**
     * 光源设置
     */
    //点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    // console.log(scene)
    // console.log(scene.children)
    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 500; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    // 相机设置~~~~~~~~~~~~~~~~


    // 加载三维模型
    var mixers = [];
    var loader = new GLTFLoader();//创建stl模型加载器对象
    loader.load("./gltf/www.gltf", (obj) => {

        // 三维模型建立坐标、缩放、旋转
        obj.scene.position.set(0,0,0);
        obj.scene.rotation.set(0,0,0);
        obj.scene.scale.set(100, 100, 100);
        scene.add(obj.scene);
        // 三维模型建立坐标、缩放、旋转


        // 三维模型的动画获取
        mixer = new THREE.AnimationMixer(obj.scene);

        mixers.push(mixer.clipAction(obj.animations[0]));
        // 三维模型的动画获取


    });
    // 加载三维模型

    // 画一条线，来判断与物体是否交集，获取交集的模型，给模型绑定事件~~~~~~~~~~~~~~~~~~~~~~~~~~
    var raycaster = new THREE.Raycaster()
    var mouse = new THREE.Vector2()

    function onMouseClick(event){

       let intersects = getIntersects(event);
       if (intersects.length !== 0 && intersects[0].object.type === 'Mesh') {

          // 三维模型的动画播放与停止
          if(intersects[0].object.name == "球体001"){
            mixers[0].play();
          }else{
            mixers[0].stop();
          }
          // 三维模型的动画播放与停止

          var selectObject = intersects[0].object;
          
       } 
       else 
       {
              console.log('未选中 Mesh!');
       }
    }
   
   function getIntersects(event) {
       event.preventDefault();// 阻止默认的点击事件执行,   
  
       //声明 rayCaster 和 mouse 变量
       let rayCaster = new THREE.Raycaster();
       let mouse = new THREE.Vector2();
  
       //通过鼠标点击位置，计算出raycaster所需点的位置，以屏幕为中心点，范围-1到1
       mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
       mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; //  这里为什么是-号，没有就无法点中
  
       //通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
       rayCaster.setFromCamera(mouse, camera);
  
       //获取与射线相交的对象数组， 其中的元素按照距离排序，越近的越靠前。
       //+true，是对其后代进行查找，这个在这里必须加，因为模型是由很多部分组成的，后  代非常多。
       let intersects = rayCaster.intersectObjects(scene.children, true);
  
       //返回选中的对象
       return intersects;
   }

    // 画一条线，来判断与物体是否交集，获取交集的模型，给模型绑定事件~~~~~~~~~~~~~~~~~~~~~~~~~~


    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer({canvas});
    renderer.setSize(width, height);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //执行渲染操作   指定场景、相机作为参数
    renderer.render(scene, camera);

    // 增加三维物体控制
    const controls = new OrbitControls(camera, canvas);
    controls.target.set(0, 5, 0);
    controls.update();
    // 增加三维物体控制


    renderer.domElement.addEventListener( 'click', onMouseClick, false );

    // 动画：创建时钟~~~~~~~~~~~~~~~~~~~~~~~~~~
    //  三维物体动画
    var clock = new THREE.Clock();
    // 动画：创建时钟~~~~~~~~~~~~~~~~~~~~~~~~~~

    function animate(){

        // 动画：为模式增加时钟~~~~~~~~~~~~~~~~~~~~~~~~~~
        var time = clock.getDelta();
        if (mixer) {
            mixer.update(time);
        }
        // 动画：为模式增加时钟~~~~~~~~~~~~~~~~~~~~~~~~~~

        // 渲染场景和相机
        renderer.render(scene,camera);
        // 渲染场景和相机

        // 重复调用函数渲染画面
        requestAnimationFrame(animate);
        // 重复调用函数渲染画面
    }
    animate();
</script>
</html>

